<template>
  <div v-if="loadingFlag" class="goodsDetailLoading">
    <van-loading class="loading-box" type="spinner" color="#fe6018" vertical>加载中</van-loading>
  </div>
  <div v-else class="container">
    <van-pull-refresh class="agent-refresh" v-model="isRefresh" @refresh="onRefresh">
      <div class="swiper">
        <van-swipe
          v-if="productDetail.product.product_img.length > 0"
          @change="onChange"
          autoplay="3000"
        >
          <van-swipe-item
            v-for="(item,index) in productDetail.product.product_img"
            :key="index"
            :style="{'background-color':'#' + index + '10' + index}"
          >
            <img v-lazy="item" alt />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">
              <span>{{ current + 1 }}/</span>
              {{productDetail.product.product_img.length}}
            </div>
          </template>
        </van-swipe>
        <img v-else class="default-img" src="@/assets/goods/mall_default.jpg" alt="商品展示图" />
      </div>
      <div v-show="productDetail.product.start_status!=2" class="count-down">
        <p
          v-if="productDetail.product.start_status == 0 || productDetail.product.start_status == 1"
        >
          <!-- 代理倒计时 -->
          <Countdown
            :type-data="typeData"
            :endTime="productDetail.product.open_time_left"
            :callback="countdownCallback"
            :endText="endText"
          ></Countdown>
        </p>
        <p v-if="productDetail.product.start_status==3">代理已满</p>
        <p v-if="productDetail.product.start_status==4">已结束</p>
      </div>
      <div class="info">
        <div class="title">
          <p>
            <span v-show="productDetail.product.product_area">{{productDetail.product.product_area}}</span>
            {{productDetail.product.product_name}} {{productDetail.product.product_place}}
          </p>
          <div @click="handleReadProdut(productDetail.product)">
            商品详情
            <van-icon class="icon" name="arrow" />
          </div>
        </div>
        <div class="price">
          <span>￥</span>
          <span>{{productDetail.product.product_amount ? productDetail.product.product_amount : "_"}}</span>
        </div>
        <div class="rate">
          <div class="rate-item">
            <p>代理费率</p>
            <p>{{productDetail.agent.agent_rate ? (productDetail.agent.agent_rate*100).toFixed(4) + '%' : '-'}}</p>
          </div>
          <div class="rate-item">
            <p>代理期限</p>
            <p
              v-if="productDetail.agent.agency_stage_max <= 0 || !productDetail.agent.agency_stage_max"
            >{{productDetail.agent.agent_time ? productDetail.agent.agent_time + '个月' : '无限期'}}</p>
            <p
              v-else
            >{{productDetail.agent.agent_time + '~' + productDetail.agent.agency_stage_max + '个月'}}</p>
          </div>
          <div class="rate-item">
            <p>当前进度</p>
            <p>{{ productDetail.agent.rate ? (productDetail.agent.rate * 100).toFixed(2) + '%' : '-'}}</p>
          </div>
        </div>
        <div class="time_address">
          <p>
            <img src="../assets/goods/time.png" alt="#" />
            发布时间：{{productDetail.product.create_time | parseTime }}
          </p>
          <p>
            <img src="../assets/goods/address.png" alt />
            {{productDetail.product.product_warehouse }}
          </p>
        </div>
      </div>
      <div class="repertory info-item">
        <div class="name">库存</div>
        <div class="text">
          {{Number(productDetail.product.real_stock) .toFixed(4)}}
          <span
            v-show="productDetail.product.product_unit"
          >{{productDetail.product.product_unit}}</span>
        </div>
      </div>
      <div class="price">
        <div class="info-item">
          <div class="name">单价</div>
          <div class="text">
            {{productDetail.product.product_price}}
            <span
              v-show="productDetail.product.product_unit"
            >元/{{productDetail.product.product_unit}}</span>
          </div>
        </div>
        <div class="info-item">
          <div class="name">总代理订金</div>
          <div
            class="text"
          >{{Number(productDetail.product.product_amount_deposit) .toFixed(2) + '元'}}</div>
        </div>
        <div class="info-item">
          <div class="name">总代理份数</div>
          <div class="text">{{Number(productDetail.agent.agent_total_copies).toFixed(0)+'份'}}</div>
        </div>
        <div class="info-item">
          <div class="name">每份订金</div>
          <div class="text">{{productDetail.agent.agent_each_copies_deposit+'元/份'}}</div>
        </div>
      </div>
      <div class="num">
        <div class="info-item">
          <div class="name">剩余份数</div>
          <div class="text">{{Number(productDetail.product.product_surplus).toFixed(0)+'份'}}</div>
        </div>
        <div class="info-item">
          <div class="name">起订份数</div>
          <div class="text">{{Number(productDetail.product.start_copies).toFixed(0)+'份'}}</div>
        </div>
      </div>
      <div class="spec">
        <div class="info-item">
          <div class="name">规格属性</div>
          <div class="text">{{productDetail.product.product_sku}}</div>
        </div>
      </div>
      <div class="agent">
        <div class="agent-item" @click="handleAgentThat(productDetail.product.is_deposit)">
          代理说明
          <van-icon class="icon" name="arrow" />
        </div>
        <div class="agent-item" @click="handleAgentRecord(productDetail.product.product_id)">
          代理记录
          <van-icon class="icon" name="arrow" />
        </div>
      </div>
      <div class="stores">
        <img v-if="productDetail.store.store_img" :src="productDetail.store.store_img" alt="#" />
        <img v-else src="@/assets/goods/icon-store.png" alt="#" />
        <div class="text">
          <p>{{productDetail.store.store_name}}</p>
          <img v-if="productDetail.store.store_type == 1" src="@/assets/me/monopoly.png" alt="#" />
          <img
            v-else-if="productDetail.store.store_type == 2"
            src="@/assets/me/flagship.png"
            alt="#"
          />
        </div>
      </div>
      <div class="footer">
        <div
          v-if="productDetail.product.start_status==2 && productDetail.product.product_surplus > 0"
          class="agent-btn active"
          @click="openAgent"
        >马上代理</div>
        <div v-else-if="productDetail.product.start_status==0" class="agent-btn">代理即将开始</div>
        <div v-else-if="productDetail.product.start_status==1" class="agent-btn">已经预约</div>
        <div v-else-if="productDetail.product.start_status==3 " class="agent-btn">代理已满</div>
        <div v-else-if=" productDetail.product.product_surplus == 0" class="agent-btn">剩余份数不足</div>
        <div v-else-if="productDetail.product.start_status==4" class="agent-btn">代理已结束</div>
      </div>
    </van-pull-refresh>
    <van-popup v-model="showPopup" position="bottom">
      <div class="content">
        <img
          class="close"
          @click="()=>{this.showPopup = false}"
          src="../assets/goods/close_03.png"
          alt="#"
        />
        <div class="info">
          <div class="pro-info">
            <img :src="productDetail.product.product_img[0]" alt />
            <div class="text">
              <p class="name">
                <span
                  v-show="productDetail.product.product_area"
                >{{productDetail.product.product_area}}</span>
                {{productDetail.product.product_name}} {{productDetail.product.product_place}}
              </p>
              <p class="price">
                ￥
                <span>{{Number(productDetail.product.product_amount) .toFixed(2)}}</span>
              </p>
              <p class="pricing">
                单价: {{productDetail.product.product_price}}
                <span
                  v-show="productDetail.product.product_unit"
                >/{{productDetail.product.product_unit}}</span>
              </p>
            </div>
          </div>
          <div class="info-item">
            <div class="name">总代理订金</div>
            <div
              class="text"
            >{{Number(productDetail.product.product_amount_deposit) .toFixed(2) + '元'}}</div>
          </div>
          <div class="info-item">
            <div class="name">剩余份数</div>
            <div class="text">{{Number(productDetail.product.product_surplus).toFixed(2)+'份'}}</div>
          </div>
          <div class="info-item">
            <div class="name">每份订金</div>
            <div class="text">{{productDetail.agent.agent_each_copies_deposit+'元'}}</div>
          </div>
          <div class="info-item">
            <div class="name">起订份数</div>
            <div class="text">{{Number(productDetail.product.start_copies).toFixed(2)+'份'}}</div>
          </div>
        </div>
        <div class="agent-cost">
          <div class="cost-item">
            <div class="name">可用余额</div>
            <div class="text">
              <span>{{accountInfo.usable_capital+'元'}}</span>
            </div>
            <div class="right" @click="handleTopUp">
              去充值
              <van-icon class="icon" name="arrow" />
            </div>
          </div>
          <div class="cost-item">
            <div class="name">代理份数</div>
            <input
              type="number"
              v-model="payParams.copies"
              maxlength="10"
              onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
              @blur="blurHandle(payParams.copies)"
            />
            <img
              class="delete"
              v-show="payParams.copies"
              src="../assets/login/delete.png"
              alt="#"
              @click="()=>{this.payParams.copies = ''}"
            />
            <div class="right" @click="selectAll">全部</div>
          </div>
          <div class="cost-item">
            <div class="name">预估代理费</div>
            <div
              v-if="productDetail.agent.agency_stage_max <= 0 || !productDetail.agent.agency_stage_max "
              class="text"
            >{{estimate_agency+'元'}}</div>
            <div v-else class="text">{{ min_estimate_agency + '~' + estimate_agency + '元'}}</div>
          </div>
        </div>
        <div class="contract">
          <input id="contracts" type="checkbox" name="checkbox" v-model="checked" />
          <label for="contracts"></label>
          <p>
            我已阅读并同意签署
            <span @click="handleOpenAgentSsq">《代理合同》</span>
          </p>
        </div>
        <div class="footer">
          <p>
            总计{{total_deposit+'元'}}
            <span
              v-show="Number(this.total_deposit) > Number(this.accountInfo.usable_capital)"
            >，当前余额不足</span>
          </p>
          <div
            class="btn"
            v-if="checked && Number(this.total_deposit) <= Number(this.accountInfo.usable_capital) && Number(payParams.copies)>=Number(productDetail.product.start_copies) && Number(payParams.copies)<=Number(productDetail.product.product_surplus) || Number(this.productDetail.product.product_surplus) <
          Number(this.productDetail.product.start_copies) &&
        Number(this.payParams.copies) ==
          Number(this.productDetail.product.product_surplus)"
            @click="_preCheckAction"
          >马上代理</div>
          <div class="btn noBtn" v-else @click="payError">马上代理</div>
        </div>
      </div>
    </van-popup>

    <van-dialog
      class="checkDialog"
      :class="{'load-dialog' : pagesType == 5}"
      v-model="pagesFlag"
      :showConfirmButton="false"
      :closeOnClickOverlay="true"
    >
      <div v-if="pagesType==1" class="dialog-box">
        <img src="@/assets/agent/loadImg.gif" alt />
        <h1>正在排队</h1>
        <p>该商品人气火爆，请耐心排队等候</p>
      </div>
      <div v-else-if="pagesType==2" class="dialog-box">
        <img class="png-img" src="@/assets/agent/iconImg3.png" alt />
        <h1>机会来了</h1>
        <p>运气不错哟，正在前往支付...</p>
      </div>
      <div v-else-if="pagesType==3" class="dialog-box">
        <img class="png-img" src="@/assets/agent/iconImg1.png" alt />
        <h1>可代理份数不足</h1>
        <p>可代理份数不足，请重新代理</p>
        <div class="btn" @click="backDetails(0)">重新代理</div>
      </div>
      <div v-else-if="pagesType==4" class="dialog-box">
        <img class="png-img" src="@/assets/agent/iconImg2.png" alt />
        <h1>代理已满</h1>
        <p>该代理商品已满，请选择其他商品代理</p>
        <div class="btn" @click="backDetails(0)">查看其他货源</div>
      </div>
      <div v-else-if="pagesType==5" class="dialog-loading">
        <van-loading class="loading-box" type="spinner" color="#fe6018" vertical>订单提交中</van-loading>
      </div>
    </van-dialog>
    <van-dialog
      v-model="passwordDialog"
      class="is-password-dialog is-password-dialog"
      :show-confirm-button="false"
    >
      <div solt="title" class="title">专属码</div>
      <div class="text">专属代理商品，输入专属码即可查看</div>
      <input type="text" maxlength="4" v-focus v-model="inputPwd" />
      <div class="footer">
        <div class="btn" @click="handleConfirm">确认</div>
        <div class="btn" @click="handleCancel">返回</div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { getAccount } from "@/api/me";
import { Swipe, SwipeItem, Popup } from "vant";
import { parseTime } from "@/utils";
import { Notify } from "vant";
import Countdown from "./common/count-down";
import {
  getProductDetail,
  checkPassword,
  checkToken,
  preCheckAction,
  doAgentOrder,
  doOrder,
  openAgentSsq,
} from "@/api/agency";

export default {
  components: {
    "van-swipe": Swipe,
    "van-swipe-item": SwipeItem,
    "van-popup": Popup,
    Countdown,
  },
  data() {
    return {
      typeData: "details",
      loadingFlag: false,
      isRefresh: false,
      current: 0,
      swiperList: [],
      showPopup: false,
      jhFlag: false,
      copies: 10,
      checked: true,
      reqParams: {
        product_id: "",
      },
      pagesFlag: false,
      pagesType: "",
      productDetail: {},
      accountInfo: {},
      payParams: {
        product_id: "",
        copies: "",
        token: "",
      },
      endText: "已开始",
      is_password: "",
      passwordDialog: false,
      password: "",
      inputPwd: "",
      passwordToken: "",
      lxNum: 0,
      repeatCheck: null,
    };
  },
  watch: {
    maxNum(val) {
      // console.log(val);
      if (val > +this.productDetail.product.product_surplus) {
        this.payParams.copies = this.productDetail.product.product_surplus;
      }
    },
    pagesFlag(val) {
      console.log(val);
      if (!val && this.repeatCheck) {
        clearTimeout(this.repeatCheck);
        this.lxNum = 0;
      }
    },
  },
  computed: {
    total_deposit() {
      return (
        this.productDetail.agent.agent_each_copies_deposit *
        this.payParams.copies
      ).toFixed(2);
    },
    estimate_agency() {
      // return (this.total_deposit * this.productDetail.agent.agent_rate).toFixed(
      //   2
      // );
      // return (
      //   this.productDetail.agent.agent_each_copies_deposit *
      //   this.payParams.copies *
      //   this.productDetail.agent.agent_rate
      // ).toFixed(2);
      let num =
        this.productDetail.agent.agent_each_copies_deposit *
        this.payParams.copies *
        this.productDetail.agent.agent_rate;
      return Math.floor(num * 100) / 100;
    },
    maxNum() {
      return this.payParams.copies;
    },
    min_estimate_agency() {
      // return (
      //   (this.estimate_agency / this.productDetail.agent.agency_stage_max) *
      //   this.productDetail.agent.agent_time
      // ).toFixed(2);
      let num =
        (this.productDetail.agent.agent_each_copies_deposit *
          this.payParams.copies *
          this.productDetail.agent.agent_rate) /
        this.productDetail.agent.agency_stage_max;
      return (
        (Math.floor(num * 100) / 100) * this.productDetail.agent.agent_time
      );
    },
  },
  created() {
    this._getAccount();
    if (localStorage.getItem("productDetail")) {
      this.productDetail = JSON.parse(localStorage.getItem("productDetail"));
      console.log("商品详情", this.productDetail);
      if (this.productDetail.password.is_password) {
        this.is_password = this.productDetail.password.is_password;
        this.password = this.productDetail.password.password;
        this.passwordDialog = true;
      } else {
        this.passwordDialog = false;
        this.password = "";
      }
    } else {
      this.loadingFlag = true;
      this.reqParams.product_id = this.$route.query.id;
      console.log("请求详情参数", this.reqParams);
      this._getDetail(() => {
        if (this.productDetail.password.is_password) {
          this.is_password = this.productDetail.password.is_password;
          this.password = this.productDetail.password.password;
          this.passwordDialog = true;
        } else {
          this.passwordDialog = false;
          this.password = "";
        }
      });
    }
  },
  destroyed() {
    console.log("组件销毁了");
    if (this.repeatCheck) {
      clearTimeout(this.repeatCheck);
    }
  },
  methods: {
    blurHandle(val) {
      console.log(val);
      if (!val || val == 0) {
        this.payParams.copies = this.productDetail.product.start_copies;
      }
    },
    countdownCallback() {
      this.reqParams.product_id = this.$route.query.id;
      this._getDetail();
      console.log("重新请求数据");
    },
    // 获取资金信息
    _getAccount() {
      getAccount().then((res) => {
        if (res.code == 1) {
          this.accountInfo = res.data;
          console.log("资金信息", this.accountInfo);
        } else {
          console.log(res.msg);
        }
      });
    },
    // 去充值
    handleTopUp() {
      this.$router.push({
        path: "/top_up",
        query: {
          type: "top_up",
        },
      });
    },
    // 监听轮播图
    onChange(index) {
      this.current = index;
    },
    // 打开代理
    async openAgent() {
      this.showPopup = true;
      this.payParams.product_id = this.productDetail.product.product_id;
      if (
        Number(this.productDetail.product.product_surplus) <
        Number(this.productDetail.product.start_copies)
      ) {
        this.payParams.copies = this.productDetail.product.product_surplus;
      } else {
        this.payParams.copies = this.productDetail.product.start_copies;
      }
    },
    // 预购买检测
    handleBuyAgent() {
      this.pagesFlag = true;
      if (this.repeatCheck) {
        this.pagesType = 1;
      } else {
        this.pagesType = 5;
      }
      // 预购买检查接口(有订金);
      preCheckAction({
        product_id: this.productDetail.product.product_id,
        copies: this.payParams.copies,
      }).then((res) => {
        // console.log("预购买检查接口", res);
        // res.code = 20230;
        // this.jhFlag = true;
        if (res.code == 1) {
          // 成功，显示机会来了
          if (this.repeatCheck) {
            clearTimeout(this.repeatCheck);
            this.lxNum = 0;
          }
          if (this.jhFlag) {
            this.pagesType = 2;
            setTimeout(() => {
              this.pay();
              this.pagesFlag = false;
            }, 1000);
          } else {
            this.pay();
          }
        } else if (res.code == 20210) {
          // 排队
          this.pagesType = 1;
          this.jhFlag = true;
          this.lxNum++;
          if (this.lxNum > 60) {
            clearTimeout(this.repeatCheck);
            this.pagesFlag = false;
            this.jhFlag = false;
            this.lxNum = 0;
          } else {
            console.log("排队轮循", this.lxNum);
            this.repeatCheck = setTimeout(() => {
              this.handleBuyAgent();
            }, 5000);
          }
        } else if (res.code == 20220) {
          // 可代理份数不足
          this.pagesType = 3;
          if (this.repeatCheck) {
            clearTimeout(this.repeatCheck);
            this.lxNum = 0;
          }
        } else if (res.code == 20230) {
          // 代理已满
          this.pagesType = 4;
          if (this.repeatCheck) {
            clearTimeout(this.repeatCheck);
            this.lxNum = 0;
          }
        }
      });
    },
    // 校验专属货源返回的token
    async _preCheckAction() {
      console.log(this.payParams);
      if (this.is_password) {
        console.log(12312312, this.passwordToken);
        let result = await checkToken({ token: this.passwordToken });
        if (result.code === 1) {
          this.handleBuyAgent();
        } else {
          Notify({
            type: "warning",
            message: "货源验证失败,请返回货源列表页重新选择商品",
          });
        }
      } else {
        this.handleBuyAgent();
      }
    },
    // 查看代理合同
    handleOpenAgentSsq() {
      let params = {
        type:
          this.productDetail.agent.agency_stage_max <= 0 ||
          !this.productDetail.agent.agency_stage_max
            ? 1
            : 3,
      };
      openAgentSsq(params).then((res) => {
        if (res.code == 1) {
          window.open(res.data.url, "_self");
        }
      });
    },
    // 代理
    async pay() {
      doOrder(this.payParams).then((res) => {
        console.log("代理res", res.data.url);
        if (res.code == 1 && res.data.url) {
          window.location.href = res.data.url;
        } else if (res.code == 20210) {
          this.handleBuyAgent();
        } else {
          Notify({ type: "warning", message: res.msg });
          this.pagesFlag = false;
        }
      });
    },

    payError() {
      console.log(
        Number(this.payParams.copies),
        Number(this.productDetail.product.start_copies)
      );
      if (!this.checked) {
        Notify({ type: "warning", message: "请阅读并同意签署 《代理合同》" });
      } else if (
        Number(this.total_deposit) > Number(this.accountInfo.usable_capital)
      ) {
        Notify({ type: "warning", message: "可用余额不足" });
      } else if (this.payParams.copies == "") {
        Notify({ type: "warning", message: "请输入代理份数" });
      } else if (
        Number(this.payParams.copies) <
          Number(this.productDetail.product.start_copies) &&
        Number(this.productDetail.product.product_surplus) >=
          Number(this.productDetail.product.start_copies)
      ) {
        Notify({
          type: "warning",
          message:
            "起订份数最少为" + this.productDetail.product.start_copies + "份",
        });
      } else if (
        Number(this.productDetail.product.product_surplus) <
          Number(this.productDetail.product.start_copies) &&
        Number(this.payParams.copies) <
          Number(this.productDetail.product.product_surplus)
      ) {
        Notify({
          type: "warning",
          message:
            "当前可代理固定份数" +
            this.productDetail.product.product_surplus +
            "份，请全部买完",
        });
      } else if (
        Number(this.payParams.copies) >
        Number(this.productDetail.product.product_surplus)
      ) {
        Notify({
          type: "warning",
          message: "当前可代理剩余份数不足",
        });
      }
    },
    // 重新代理/查看更多代理
    backDetails(flag) {
      this.pagesFlag = false;
      if (flag) {
        this.$router.push({
          name: "goods",
        });
      } else {
        this.jhFlag = false;
        this.lxNum = 0;
        clearTimeout(this.repeatCheck);
      }
    },
    // 请求商品详情数据
    _getDetail(callback = () => {}) {
      getProductDetail(this.reqParams)
        .then((res) => {
          if (res.code == 1) {
            if (res.data.product.product_price.indexOf("¥") > -1) {
              res.data.product.product_price = res.data.product.product_price.slice(
                1,
                res.data.product.product_price.length
              );
            }
            this.productDetail = res.data;
            console.log("商品详情", this.productDetail);
            localStorage.setItem("productDetail", JSON.stringify(res.data));
            callback();
            // if (this.productDetail.product.open_time) {
            //   this.countdownFlag = true;
            // }
          } else {
            console.log(res.msg);
          }
        })
        .finally(() => {
          this.loadingFlag = false;
          this.isRefresh = false;
        });
    },
    // 下拉刷新
    onRefresh() {
      this._getDetail();
    },
    // 查看商品详情
    handleReadProdut(product) {
      this.$router.push({
        path: "/product_detail",
      });
    },
    //查看代理记录
    handleAgentRecord(id) {
      this.$router.push({
        path: "/agent_record",
        query: {
          id,
        },
      });
    },
    // 确认提交商品专属码
    handleConfirm() {
      if (this.inputPwd === "") {
        return false;
      }
      this.$toast.loading({
        duration: 0,
        message: "正在验证中",
        forbidClick: true,
        loadingType: "spinner",
      });
      let req_data = {
        check_password: this.inputPwd,
        password: this.password,
      };
      checkPassword(req_data)
        .then((result) => {
          this.$toast.clear();
          console.log(result);
          if (result.code == 1) {
            Notify({ type: "success", message: "验证成功" });
            this.passwordToken = result.data.token;
            this.passwordDialog = false;
          } else {
            Notify({ type: "warning", message: result.msg });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },
    // 取消填写商品专属码
    handleCancel() {
      this.passwordDialog = false;
      this.$router.go(-1);
    },
    // 查看代理说明
    handleAgentThat(type) {
      console.log("type", type);
      this.$router.push({
        path: "/agent_that",
        query: {
          type,
        },
      });
    },
    //代理全部
    selectAll() {
      this.payParams.copies = this.productDetail.product.product_surplus;
    },
  },
};
</script>

<style lang='scss' scoped>
.checkDialog {
  &.load-dialog {
    background: rgba(225, 225, 225, 0);
    .dialog-loading {
      .van-loading__text {
        color: #fff;
      }
    }
  }

  .dialog-box {
    padding: 100px 0;
    img {
      width: 150px;
      height: 110px;
      &.png-img {
        height: 100px;
      }
    }
    h1 {
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: bolder;
      color: rgba(17, 17, 17, 1);
      padding: 50px 0 30px 0;
    }
    p {
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
    .btn {
      width: 540px;
      height: 88px;
      line-height: 88px;
      margin: 0 auto;
      margin-top: 50px;
      background: linear-gradient(90deg, #ff9303, #fe6018);
      border-radius: 4px;
      color: #fff;
      font-size: 30px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
}
.goodsDetailLoading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.is-password-dialog {
  border-radius: 10px !important;
  /deep/ .van-dialog__content {
    padding: 30px 0 0 0;
  }
  /deep/.van-dialog__header {
    font-size: 16px;
  }
  .title {
    font-size: 32px;
    font-weight: 500;
    color: rgba(17, 17, 17, 1);
    padding-bottom: 28px;
  }
  .text {
    font-size: 30px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    margin-bottom: 30px;
  }
  input {
    width: 500px;
    margin: auto;
    margin-left: 0;
    border-bottom: 1px solid #eee;
    font-size: 60px;
    padding: 20px;
    letter-spacing: 6px;
    margin-bottom: 60px;
    text-align: center;
    font-weight: bolder;
    &::placeholder {
      letter-spacing: 0;
      color: #ccc;
    }
  }
  .footer {
    > .btn {
      margin: 0 auto;
      width: 540px;
      height: 88px;
      line-height: 88px;
      font-size: 30px;
      padding-bottom: 10px;
      background: linear-gradient(
        90deg,
        rgba(255, 147, 3, 1),
        rgba(254, 96, 24, 1)
      );
      border-radius: 4px;
      color: #fff;
      &:nth-of-type(2) {
        background: #fff;
        color: #fe6018;
      }
    }
  }
}
.container {
  width: 100vw;
  min-height: 100vh;
  background-color: #f7f7f7;
  > .agent-refresh {
    .swiper {
      /deep/ .van-swipe-item {
        width: 100%;
        height: 7.63rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .default-img {
        width: 100%;
        height: 7.63rem;
      }
      .custom-indicator {
        position: absolute;
        right: 30px;
        bottom: 30px;
        width: 90px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        color: #fff;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 19px;
        font-size: 20px;
        letter-spacing: 2px;
        > span {
          font-size: 28px;
        }
      }
    }
    .count-down {
      width: 100%;
      height: 100px;
      line-height: 100px;
      background: url("../assets/goods/count_down_bg.png") no-repeat;
      background-size: 100% 100%;
      font-size: 26px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      letter-spacing: 4px;
      span {
        display: inline-block;
        width: 42px;
        height: 42px;
        line-height: 42px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        font-size: 26px;
        font-weight: 500;
        color: rgba(254, 96, 24, 1);
        margin: 0 12px;
      }
    }
    .info {
      background-color: #fff;
      padding: 38px 30px 30px;
      margin-bottom: 20px;
      > .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 18px;
        > p {
          display: flex;
          font-size: 30px;
          font-weight: bolder;
          color: rgba(17, 17, 17, 1);
          > span {
            display: block;
            width: auto;
            height: 26px;
            line-height: 30px;
            padding: 0 2px;
            border: 2px solid #fd5f17;
            border-radius: 4px;
            font-size: 20px;
            font-weight: 400;
            color: rgba(254, 96, 24, 1);
            margin-right: 18px;
          }
        }
        > div {
          font-size: 28px;
          font-weight: 400;
          color: rgba(254, 96, 24, 1);
          .icon {
            vertical-align: middle;
            margin-bottom: 4px;
          }
        }
      }
      > .price {
        font-size: 30px;
        font-weight: 500;
        color: rgba(254, 96, 24, 1);
        text-align: left;
        margin-bottom: 30px;
        letter-spacing: 0;
        > span:nth-of-type(2) {
          font-weight: bolder;
          font-size: 50px;
        }
      }
      > .rate {
        display: flex;
        justify-content: space-between;
        align-items: center;
        > .rate-item {
          margin-bottom: 50px;
          > p {
            font-size: 24px;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            margin-bottom: 12px;
            &:last-of-type {
              font-size: 28px;
              font-weight: 400;
              color: rgba(17, 17, 17, 1);
              margin: 0;
            }
          }
          &:last-of-type {
            text-align: right;
          }
        }
      }
      > .time_address {
        display: flex;
        justify-content: space-between;
        > p {
          font-size: 24px;
          font-weight: 400;
          color: rgba(177, 177, 177, 1);
          > img {
            vertical-align: middle;
            width: 24px;
            height: 24px;
            margin-bottom: 4px;
            margin-right: 8px;
          }
        }
      }
    }
    .info-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      text-align: left;
      padding: 30px;
      background-color: #fff;
      > .name {
        width: 140px;
        margin-right: 56px;
        font-size: 28px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }
      > .text {
        font-size: 28px;
        font-weight: 400;
        color: rgba(17, 17, 17, 1);
      }
    }
    .repertory {
      margin-bottom: 20px;
    }
    .num {
      margin-bottom: 20px;
      > .info-item {
        border-bottom: 1px solid #f2f2f2;
        &:last-of-type {
          border: none;
        }
      }
    }
    .price {
      margin-bottom: 20px;
      > .info-item {
        border-bottom: 1px solid #f2f2f2;
        &:last-of-type {
          border: none;
        }
      }
    }
    .spec {
      margin-bottom: 20px;
    }
    .agent {
      margin-bottom: 20px;
      > .agent-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 36px 30px 26px;
        background-color: #fff;
        font-size: 28px;
        font-weight: 400;
        color: rgba(17, 17, 17, 1);
        > .icon {
          color: #bcbcbc;
        }
      }
    }
    .stores {
      display: flex;
      background-color: #fff;
      padding: 30px;
      margin-bottom: 40px;
      > img {
        width: 100px;
        height: 100px;
        margin-right: 28px;
      }
      > .text {
        text-align: left;
        > p {
          font-size: 30px;
          font-weight: 400;
          color: rgba(17, 17, 17, 1);
          margin: 10px 0 14px 0;
        }
        > img {
          width: 94px;
          height: 30px;
        }
      }
    }
    .footer {
      width: 100%;
      height: 120px;
      background: rgba(255, 255, 255, 1);
      padding-top: 16px;
      > .agent-btn {
        width: 670px;
        height: 88px;
        line-height: 88px;
        margin: 0 auto;
        font-size: 28px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        background: linear-gradient(
          90deg,
          rgba(255, 212, 154, 1),
          rgba(255, 191, 163, 1)
        );
        border-radius: 4px;
        &.active {
          background: linear-gradient(
            90deg,
            rgba(255, 147, 3, 1),
            rgba(254, 96, 24, 1)
          );
        }
      }
    }
  }
  .content {
    position: relative;
    background-color: #f7f7f7;
    > .close {
      position: absolute;
      top: 30px;
      right: 30px;
      width: 38px;
      height: 38px;
    }
    > .info {
      padding: 30px;
      padding-bottom: 0;
      margin-bottom: 20px;
      background-color: #fff;
      > .pro-info {
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        > img {
          width: 180px;
          height: 170px;
          background: rgba(231, 233, 239, 1);
          border-radius: 4px;
        }
        > .text {
          padding-left: 24px;
          .name {
            display: flex;
            align-content: center;
            font-size: 28px;
            font-weight: bolder;
            color: rgba(17, 17, 17, 1);
            margin-bottom: 44px;
            > span {
              display: block;
              padding: 0 2px;
              height: 26px;
              line-height: 30px;
              margin-top: -2px;
              background: rgba(254, 96, 24, 0);
              border: 2px solid rgba(254, 96, 24, 1);
              border-radius: 4px;
              font-size: 20px;
              color: rgba(254, 96, 24, 1);
              margin-right: 16px;
              font-weight: 400;
            }
          }
          .price {
            text-align: left;
            font-size: 24px;
            font-weight: 500;
            color: rgba(254, 96, 24, 1);
            margin-bottom: 16px;
            > span {
              font-size: 50px;
            }
          }
          .pricing {
            font-size: 24px;
            text-align: left;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
          }
        }
      }
      > .info-item {
        display: flex;
        text-align: left;
        padding: 30px 0;
        border-bottom: 1px solid #f2f2f2;
        &:last-of-type {
          border: none;
        }
        .name {
          width: 140px;
          font-size: 28px;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          margin-right: 62px;
        }
        > .text {
          font-size: 28px;
          font-weight: 400;
          color: rgba(17, 17, 17, 1);
        }
      }
    }
    > .agent-cost {
      text-align: left;
      padding: 0 30px;
      background-color: #fff;
      > .cost-item {
        display: flex;
        align-items: center;
        padding: 30px 0;
        > .delete {
          margin: auto;
          margin-right: -70px;
          margin-bottom: 2px;
          width: 26px;
          height: 26px;
        }
        > .name {
          width: 140px;
          font-size: 28px;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          margin-right: 62px;
        }
        > .text {
          font-size: 28px;
          font-weight: 400;
          color: rgba(17, 17, 17, 1);
          > span {
            font-size: 28px;
            font-weight: 500;
            color: rgba(254, 96, 24, 1);
          }
        }
        > .right {
          margin: auto;
          margin-right: 0;
          font-size: 28px;
          font-weight: 400;
          color: rgba(56, 126, 255, 1);
          > .icon {
            vertical-align: middle;
            margin-top: -2px;
            margin-left: -2px;
          }
        }
      }
    }
    > .contract {
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 30px;
      font-size: 26px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      input[type="checkbox"] {
        visibility: hidden;
        margin-right: 16px;
      }
      #contracts + label {
        display: block;
        position: absolute;
        top: 28px;
        left: 30px;
        width: 26px;
        height: 26px;
        background: rgba(241, 241, 241, 1);
        border: 2px solid rgba(167, 167, 167, 1);
        border-radius: 2px;
      }
      #contracts:checked + label::before {
        content: "";
        display: block;
        width: 26px;
        height: 26px;
        background: url("../assets/goods/ok.png") no-repeat;
        background-size: 100% 100%;
      }
      span {
        color: #111111;
      }
    }
    > .footer {
      padding: 0 30px 15px;
      background-color: #fff;
      > p {
        font-size: 28px;
        font-weight: 400;
        color: rgba(17, 17, 17, 1);
        padding: 24px 0;
        > span {
          color: #fe6018;
        }
      }
      > .btn {
        width: 670px;
        height: 88px;
        line-height: 88px;
        margin: 0 auto;
        background: linear-gradient(
          90deg,
          rgba(255, 147, 3, 1),
          rgba(254, 96, 24, 1)
        );
        border-radius: 4px;
        color: #fff;
        font-size: 28px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        &.noBtn {
          background: linear-gradient(90deg, #ffd49a, #ffbfa3);
        }
      }
    }
  }
}
</style>
